﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="web-method-post.aspx.cs" Inherits="JQuery.Study.WebFormSite.WebMethodPost" %>

<%@ Register TagPrefix="uc" TagName="HeaderPage" Src="Controls/Header.ascx" %>
<%@ Register TagPrefix="uc" TagName="FooterPage" Src="Controls/Footer.ascx" %>
<%@ Register TagPrefix="uc" TagName="ScriptLib" Src="Controls/ScriptJs.ascx" %>
<%@ Register TagPrefix="uc" TagName="StylePage" Src="Controls/StylePage.ascx" %>
<%@ Register TagPrefix="uc" TagName="SubMenu" Src="Controls/SubMenu.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Web Service Post - All About jQuery | ASP.Net | AJAX</title>
    <uc:StylePage ID="StylePage" runat="server" />
    <uc:ScriptLib ID="ScriptLib" runat="server" />
    <script type="text/javascript">

        function FormFieldsToJson(paramQuery) {
            var parans = paramQuery.split('&');
            var values = new Array();

            for (var i = 0; i < parans.length; i++) {
                var aux = parans[i].split('=');
                values.push('"' + aux[0] + '"'  + ':' + '"' + aux[1] + '"');
            }

            return "{form : {" + values.join(',') + "}}";
        }

        function FormFieldsToNameValueArray(paramQuery) {
            var parans = paramQuery.split('&');
            var values = new Array();
            
            for (var i = 0; i < parans.length; i++) {
                var aux = parans[i].split('=');
                values.push('{ name : "' + aux[0] + '",' + 'value : "' + aux[1] + '"}');
            }

            return "{form : [" + values.join(',') + "]}";
        }
        
        $(document).ready(function () {
            $("#first-example").submit(function () {
                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"),
                    //data: FormFieldsToNameValueArray($(this).serialize()),
                    data: FormFieldsToJson($(this).serialize()),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                    }
                });
                
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="conteiner">
        <uc:HeaderPage ID="Header" Title="All About jQuery" runat="server" />
        <div id="content">
            <h2>Explorando o JQuery Ajax com ASP.Net</h2>
            <uc:SubMenu ID="SubMenu" Section="Ajax" runat="server" />
            <h3>Usando WebMethod via POST</h3>
        </div>
        <fieldset>
            <legend>Primeira Exemplo</legend>
            <form method="post" action="web-method-post.aspx/ProcessAjaxFirst" id="first-example">
                <label for="nome">Nome</label>
                <input name="Nome" id="Nome" type="text" />
                <label for="sobrenome">Sobrenome</label>
                <input name="Sobrenome" id="Sobrenome" type="text" />
                <label for="email">Email</label>
                <input name="Email" id="Email" type="text" />
                <label for="fone">Fone</label>
                <input name="Fone" id="Fone" type="text" />

                <button id="enviar" type="submit">Enviar</button>
            </form>
        </fieldset>

        <uc:FooterPage ID="Footer" runat="server" />
    </div>
</body>
</html>